<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Heima travel website</title>

		<!-- Bootstrap -->
		<link href="bootstrapDict/css/bootstrap.min.css" rel="stylesheet">
		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		<script src="bootstrapDict/jquery-3.2.1.min.js"></script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		<script src="bootstrapDict/js/bootstrap.min.js"></script>

		<style>
			.paddtop {
				padding-top: 10px;
			}
			
			.table {
				border: 2px solid lightpink;
			}
		</style>

	</head>

	<body>
		<header class="container-fluid">
			<div class="row">
				<img src="../../../html/day01-html/image/top_banner.jpg" />
			</div>
			<!-------------------banner_top-------------------- -->
			<div class="row paddtop">
				<div class="col-md-3">
					<img src="../../../html/day01-html/image/logo.jpg" />
				</div>

				<!---------------------search--------------------- -->
				<div class="col-md-5">
					<input type="text" class="search-input" placeholder=" please input your target." />
					<a class="search-btn" href="https://www.google.com">搜索</a>
				</div>
				<!---------------------contact method------------------------------>
				<div class="col-md-4">
					<img src="../../../html/day01-html/image/hotel_tel.png" />
				</div>
			</div>
			<!------------------------table---------=-=------------->
			<form>
				<div class="form-group">
					<label for="exampleInputEmail1">Email address</label>
					<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
				</div>
				<div class="form-group">
					<label for="exampleInputPassword1">Password</label>
					<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
				</div>
				<div class="form-group">
					<label for="exampleInputFile">File input</label>
					<input type="file" id="exampleInputFile">
					<p class="help-block">Example block-level help text here.</p>
				</div>
				<div class="checkbox">
					<label>
				      <input type="checkbox"> Check me out
				    </label>
				</div>
				<button type="submit" class="btn btn-default">Submit</button>

				<!-- Standard button -->
				<button type="button" class="btn btn-default">（默认样式）Default</button>

				<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
				<button type="button" class="btn btn-primary">（首选项）Primary</button>

				<!-- Indicates a successful or positive action -->
				<button type="button" class="btn btn-success">（成功）Success</button>

				<!-- Contextual button for informational alert messages -->
				<button type="button" class="btn btn-info">（一般信息）Info</button>

				<!-- Indicates caution should be taken with this action -->
				<button type="button" class="btn btn-warning">（警告）Warning</button>

				<!-- Indicates a dangerous or potentially negative action -->
				<button type="button" class="btn btn-danger">（危险）Danger</button>

				<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
				<button type="button" class="btn btn-link">（链接）Link</button>
			</form>
		</header>

	</body>

</html>